<template>
  <CompOperate
      :field="field"
      :designer="designer"
      :design-state="designState"
      :parent-list="parentList"
      :parent-widget="parentWidget"
      :sub-form-row-id="subFormRowId"
      :sub-form-row-index="subFormRowIndex"
      :sub-form-col-index="subFormColIndex"
      :index-of-parent-list="indexOfParentList"
      :display-style="field.options.displayStyle"
  >
    <div class="scene-video-text-1920" :style="getStyle('head')" v-if="true">
      <div class="scene-video-wrap">
        <el-row :gutter="20">
          <el-col :span="colWidth('left')" v-if="optionsInfo.videoHide">
            <div class="grid-content bg-purple">
              <div class="left-area" :key="getOnlyId()" :style="getStyle('video')" ref="videoInfo">
                <!--正式环境-->
                <div class="video-area-inside" v-if="devType">
                  <i class="el-icon-video-play"></i>
                </div>
                <!--开发环境-->
                <video
                    autoplay
                    class="video-area-inside2"
                    preload='auto'
                    controls="controls"
                    v-if="!devType"
                    @ended="(e)=>handleEnded(e)"
                    :data-src="getSource()">
                  <source :src="getSource()" type="video/mp4"/>
                  <source :src="getSource()" type="video/ogg"/>
                  很抱歉 , 当前浏览器不支持现有视频格式 ~
                </video>
              </div>
            </div>
          </el-col>
          <el-col :span="colWidth('right')" v-if="optionsInfo.textHide">
            <div class="grid-content bg-purple-light" >
              <div class="right-area">
                <div class="header" v-if="optionsInfo?.tipsHeaderShown">{{ optionsInfo.title }}</div>
                <div class="content" :class="{'content-hide-header':!(optionsInfo?.tipsHeaderShown)}">
                  <template v-if="optionsInfo.rightType === 'img'">
                    <div class="swiper-slide"  v-for="(item,index) in (optionsInfo.carouselInfo)"
                      :key="`${item.id}_${index}` || index">
                          <img class="picture"  :src="getPictureSource(item.url)"
                              alt="图片资源"/>
                      </div>
                  </template>
                  <div class="container" v-else :style="getStyle('right')">
                    <ScrollEditY :content="optionsInfo.content || ''" :pageDuration="10"/>
                  </div>
                  
                </div>
              </div>
            </div>
            
          </el-col>
        </el-row>
      </div>
    </div>
  </CompOperate>
</template>

<script>
import {v4 as uuid} from 'uuid';
import {pxToVw, getQueryString} from "@/utils/common";
import emitter from "@/utils/designer/emitter";
import ScrollEditY from "@c/public/seamlessScroll/ScrollEditY.vue";
import CompOperate from "@c/public/form-designer/devType/modules/compOperate.vue";
import mixin from "@sc/templateDetails/modules/homeMiddle/fieldMixin";
import {buildParentApi} from "@/utils/designer/util";
import lodash from "lodash";

export default {
  name: "scene-video-text-1920-widget",

  componentName: "FieldWidget", //必须固定为FieldWidget，用于接收父级组件的broadcast事件

  mixins: [emitter, mixin],

  props: {
    widget: Object,
    field: Object,
    parentWidget: Object,
    parentList: Array,
    indexOfParentList: Number,
    designer: Object,
    designState: {
      type: Boolean,
      default: false,
    },
    devType: {
      type: Boolean,
      default: false,
    },

    subFormRowIndex: {
      /* 子表单组件行索引，从0开始计数 */ type: Number,
      default: -1,
    },
    subFormColIndex: {
      /* 子表单组件列索引，从0开始计数 */ type: Number,
      default: -1,
    },
    subFormRowId: {
      /* 子表单组件行Id，唯一id且不可变 */ type: String,
      default: "",
    },

    headTitle: {
      type: String,
      default: "",
    },
    visibleTitle: {
      type: Boolean,
    },
    //prop传入的表单JSON配置
    parentApi: {
      type: Object,
      default: () => buildParentApi()
    },
  },

  data() {
    return {
      number: 0,
      screenWidth: null,
      carouselKey: uuid(),
      optionsInfo: Object(),
    }
  },

  components: {
    ScrollEditY,
    CompOperate,
  },

  computed: {
    //生成唯一的字符串
    getOnlyId() {
      return function () {
        return uuid()
      }
    },

    // 模板的行内样式
    getStyle() {
      return function (val) {
        const self = this;
        let info = (self.field?.options?.infoPublicConfig) || Object();
        let Obj = Object();
        switch (val) {
          case "head":
            Reflect.set(Obj, "height", pxToVw(info.height));
            Reflect.set(Obj, "marginTop", pxToVw(info.marginTop));
            Reflect.set(Obj, "marginBottom", pxToVw(info.marginBottom));
            return Obj;
          case "list":
            Reflect.set(Obj, "height", pxToVw(info.contentHeight));
            return Obj;
          case "video":
            if (Reflect.has(info, 'videoPadding')) {
              Reflect.set(Obj, "padding", pxToVw(info?.videoPadding));
            } else {
              Reflect.set(Obj, "padding", pxToVw(30));
            }
            return Obj;
          case 'right': 
              Reflect.set(Obj, "background", (info?.contentTitleBgColor));
            return Obj;
        }
      };
    },

    // 元素宽度
    colWidth() {
      return function (sign) {
        let {videoHide, textHide} = this.optionsInfo
        switch (sign) {
          case "left":
            if (textHide) {
              return 13
            } else {
              return 24
            }
          case "right":
            if (videoHide) {
              return 11
            } else {
              return 24
            }
        }
      }
    },

    // 获取视频资源
    getSource() {
      return function () {
        let {video} = this.optionsInfo;
        if (video && video.length) {
          return `${video[this.number].url}?t=${this.getOnlyId()}&info=${video[this.number].url}`;
        }
      }
    },

    // 获取图片资源
    getPictureSource() {
      return function (row) {
        return `${row}?t=${this.getOnlyId()}`
      }
    },

  },

  mounted() {
    this.handleOnMounted();

    // this.$nextTick(() => {
    //   this.executeMethod('getVideoMedias');
    // })
  },

  methods: {
    handleEnded(event) {
      let {video} = this.optionsInfo
      let videoInfo = event.target.currentSrc;
      let info = getQueryString('info', videoInfo)
      const findIndex = this.$lodash.findIndex(video, {url: info})
      if (!this.$lodash.isUndefined(findIndex) && !this.$lodash.isNull(findIndex)) {
        let next = (findIndex + 1)
        if (video.length > next) {
          this.number = next
        } else {
          this.number = 0
        }
      } else {
        this.number = 0
      }
    },

    // 等待候诊滚动结束
    handleScrollEnd() {
      console.log('等待就诊滚动结束');
    },

    // 接收父组件传递过来的数据
    async executeMethod(key, data) {
      switch (key) {
        case "patientListInfo":
          console.log(`患者列表-数据处理逻辑-${data}`);
          let patientList = this.$lodash.cloneDeep(data);
          await this.$store.dispatch('setWaitingPatientInfo', patientList)
          if (this.$refs.scroll) {
            this.$refs.scroll.reset()
          }
          break
          //   关于视频播放
        case "getVideoMedias":
          let element = (this.$refs.videoInfo);
          if (element) {
            let params = Object();
            let info = (this.optionsInfo) || Array();
            const rect = element.getBoundingClientRect();
            const positionInfo = {
              width: Math.ceil(rect.width),
              height: Math.ceil(rect.height),
              top: parseInt(rect.top),
              right: parseInt(rect.right),
              bottom: parseInt(rect.bottom),
              left: parseInt(rect.left),
            };
            Reflect.set(params, 'positionInfo', positionInfo);
            Reflect.set(params, 'video', info['video']);
            this.parentApi.executeParentMethod('playVideoMedias', params);
          }
          break
      }
    }
  },

  destroyed() {
    this.unregisterFromRefList();
  },

  watch: {
    // 获取配置项
    field: {
      handler: function (val) {
        let key = (val.options.config);
        this.carouselKey = uuid();
        this.optionsInfo = val?.options[key] || Object();
      },
      deep: true,
      immediate: true
    },
  },

};
</script>

<style lang="scss" scoped>
.scene-video-text-1920 {
  background: transparent;
  color: #333;
  height: 100%;
  width: 100%;
  overflow: hidden;
  line-height: 100%;
  box-sizing: border-box;

  .scene-video-wrap {
    height: 100%;

    .el-row {
      margin-bottom: 20px;
      height: 100%;
      box-sizing: border-box;

      .el-col {
        border-radius: 4px;
        height: 100%;

        .grid-content {
          display: flex;
          height: 100%;
          align-self: center;
          align-items: center;
          border-radius: 4px;
          min-height: 36px;
        }
      }

      .bg-purple {
        overflow: hidden;
        border-radius: 8px !important;

        .left-area {
          width: 100%;
          height: 100%;
          min-height: 100%;
          min-width: 100%;
          padding: 30px;
          box-sizing: border-box;


          .video-area-inside {
            width: 100%;
            height: 100%;
            min-width: 100%;
            min-height: 100%;
            overflow: hidden;
            border-radius: 8px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: rgba(0, 0, 0, 0.8);

            i {
              font-size: 150px;
              color: #EBEEF5;
            }
          }

          .video-area-inside2 {
            height: 100% !important;
            width: 100% !important;
            object-fit: contain;
          }
        }
      }

      .bg-purple-light {
        overflow: hidden;
        border-radius: 8px !important;

        .right-area {
          width: 100%;
          height: 100%;
          overflow: hidden;

          .header {
            padding: 18px 0;
            text-align: center;
            border-bottom: 1px solid #DDDDDD;
            font-size: 48px;
            line-height: 48px;
            color: #0059B3;
            @include fontWeight()
          }

          .content {
            height: calc(100% - 84px);
            box-sizing: border-box;
            padding: 22px;

            .container {
              line-height: 64px;
              font-size: 32px;
              height: 100%;
            }

            .picture {
              width: 100% !important;
              height: 100% !important;
              object-fit: contain !important;
            }
          }

          .content-hide-header{
            height: 100% !important;
          }
        }
      }
    }
  }
}
</style>